<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>预约摄影师</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    :root {
      --primary-color: #07c160;
      --secondary-color: #f8f8f8;
      --text-color: #333;
      --light-text: #666;
      --border-color: #eaeaea;
      --danger-color: #ff4d4f;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text-color);
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      line-height: 1.5;
    }
    
    .container {
      max-width: 100%;
      padding: 0;
      overflow-x: hidden;
    }
    
    /* 导航栏 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      background-color: white;
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 0 15px;
      border-bottom: 1px solid var(--border-color);
    }
    
    .navbar-back {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
    
    .navbar-title {
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      flex: 1;
    }
    
    /* 预约表单 */
    .booking-form {
      background-color: white;
      margin: 15px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .form-section {
      padding: 15px;
      border-bottom: 1px solid var(--border-color);
    }
    
    .form-section:last-child {
      border-bottom: none;
    }
    
    .section-title {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    
    .section-subtitle {
      font-size: 13px;
      color: var(--light-text);
      margin-bottom: 15px;
    }
    
    /* 预约时间选择 */
    .date-selector {
      display: flex;
      overflow-x: auto;
      gap: 10px;
      padding-bottom: 5px;
      margin-bottom: 15px;
    }
    
    .date-item {
      min-width: 60px;
      text-align: center;
      padding: 8px 0;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      cursor: pointer;
    }
    
    .date-item.active {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }
    
    .date-day {
      font-size: 16px;
      font-weight: 500;
    }
    
    .date-weekday {
      font-size: 12px;
      color: var(--light-text);
    }
    
    .date-item.active .date-weekday {
      color: white;
    }
    
    .time-slots {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    
    .time-slot {
      padding: 8px 0;
      text-align: center;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      font-size: 14px;
      cursor: pointer;
    }
    
    .time-slot.active {
      background-color: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }
    
    .time-slot.disabled {
      background-color: #f5f5f5;
      color: #ccc;
      cursor: not-allowed;
    }
    
    /* 服务包 选择 */
    .package-options {
      margin-bottom: 10px;
    }
    
    .package-option {
      display: flex;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      margin-bottom: 10px;
      cursor: pointer;
      position: relative;
    }
    
    .package-option.active {
      border-color: var(--primary-color);
      background-color: rgba(7, 193, 96, 0.05);
    }
    
    .package-option-radio {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid var(--border-color);
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .package-option.active .package-option-radio {
      border-color: var(--primary-color);
      background-color: var(--primary-color);
    }
    
    .package-option.active .package-option-radio::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: white;
    }
    
    .package-info {
      flex: 1;
    }
    
    .package-name {
      font-weight: 500;
      display: flex;
      justify-content: space-between;
    }
    
    .package-price {
      color: var(--primary-color);
    }
    
    .package-desc {
      font-size: 13px;
      color: var(--light-text);
      margin-top: 5px;
    }
    
    /* 备注输入 */
    .form-input {
      width: 100%;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 10px;
      font-size: 14px;
      margin-top: 10px;
      box-sizing: border-box;
    }
    
    .form-input:focus {
      outline: none;
      border-color: var(--primary-color);
    }
    
    /* 底部总价和提交按钮 */
    .booking-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      padding: 15px;
      box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .total-price {
      font-size: 20px;
      font-weight: 500;
      color: var(--primary-color);
    }
    
    .submit-btn {
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 22px;
      padding: 10px 24px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
    }
    
    /* 联系人信息 */
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .form-group {
      position: relative;
    }
    
    .form-label {
      display: block;
      font-size: 14px;
      margin-bottom: 5px;
    }
    
    .required::after {
      content: "*";
      color: var(--danger-color);
      margin-left: 3px;
    }
    
    /* 页面内容区域 */
    .content {
      padding-bottom: 80px; /* 为固定底部按钮留出空间 */
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div onclick="goBack()">
        <i class="fas fa-chevron-left navbar-back"></i>
      </div>
      <div class="navbar-title">预约摄影师</div>
      <div style="width: 24px;"></div>
    </div>
    
    <div class="content">
      <!-- 摄影师简要信息 -->
      <div class="form-section" style="display: flex; align-items: center; background-color: white; margin: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);">
        <img src="https://img.freepik.com/free-photo/attractive-stylish-young-woman-with-photo-camera_171337-9870.jpg" alt="摄影师头像" style="width: 60px; height: 60px; border-radius: 30px; margin-right: 15px; object-fit: cover;">
        <div>
          <div style="font-weight: 500;">艾米丽摄影工作室</div>
          <div style="font-size: 13px; color: var(--light-text);">专业人像摄影师</div>
        </div>
      </div>
      
      <!-- 预约表单 -->
      <form id="booking-form" class="booking-form">
        <!-- 时间选择 -->
        <div class="form-section">
          <div class="section-title">选择预约时间</div>
          
          <!-- 日期选择 -->
          <div class="date-selector">
            <div class="date-item" data-date="2023-05-10" onclick="selectDate(this)">
              <div class="date-day">10</div>
              <div class="date-weekday">周三</div>
            </div>
            <div class="date-item" data-date="2023-05-11" onclick="selectDate(this)">
              <div class="date-day">11</div>
              <div class="date-weekday">周四</div>
            </div>
            <div class="date-item active" data-date="2023-05-12" onclick="selectDate(this)">
              <div class="date-day">12</div>
              <div class="date-weekday">周五</div>
            </div>
            <div class="date-item" data-date="2023-05-13" onclick="selectDate(this)">
              <div class="date-day">13</div>
              <div class="date-weekday">周六</div>
            </div>
            <div class="date-item" data-date="2023-05-14" onclick="selectDate(this)">
              <div class="date-day">14</div>
              <div class="date-weekday">周日</div>
            </div>
            <div class="date-item" data-date="2023-05-15" onclick="selectDate(this)">
              <div class="date-day">15</div>
              <div class="date-weekday">周一</div>
            </div>
            <div class="date-item" data-date="2023-05-16" onclick="selectDate(this)">
              <div class="date-day">16</div>
              <div class="date-weekday">周二</div>
            </div>
          </div>
          
          <!-- 时间段选择 -->
          <div class="time-slots">
            <div class="time-slot disabled">09:00</div>
            <div class="time-slot" onclick="selectTimeSlot(this)">10:00</div>
            <div class="time-slot disabled">11:00</div>
            <div class="time-slot" onclick="selectTimeSlot(this)">13:00</div>
            <div class="time-slot active" onclick="selectTimeSlot(this)">14:00</div>
            <div class="time-slot" onclick="selectTimeSlot(this)">15:00</div>
            <div class="time-slot" onclick="selectTimeSlot(this)">16:00</div>
            <div class="time-slot disabled">17:00</div>
            <div class="time-slot" onclick="selectTimeSlot(this)">18:00</div>
          </div>
        </div>
        
        <!-- 套餐选择 -->
        <div class="form-section">
          <div class="section-title">选择套餐</div>
          <div class="package-options">
            <!-- 标准套餐 -->
            <div class="package-option" data-price="199" onclick="selectPackage(this)">
              <div class="package-option-radio"></div>
              <div class="package-info">
                <div class="package-name">
                  <span>标准套餐</span>
                  <span class="package-price">¥199</span>
                </div>
                <div class="package-desc">1小时拍摄，1套服装，10张精修，电子版交付</div>
              </div>
            </div>
            
            <!-- 高级套餐 -->
            <div class="package-option active" data-price="299" onclick="selectPackage(this)">
              <div class="package-option-radio"></div>
              <div class="package-info">
                <div class="package-name">
                  <span>高级套餐</span>
                  <span class="package-price">¥299</span>
                </div>
                <div class="package-desc">2小时拍摄，2套服装，15张精修，电子版交付，提供简单道具</div>
              </div>
            </div>
            
            <!-- 豪华套餐 -->
            <div class="package-option" data-price="499" onclick="selectPackage(this)">
              <div class="package-option-radio"></div>
              <div class="package-info">
                <div class="package-name">
                  <span>豪华套餐</span>
                  <span class="package-price">¥499</span>
                </div>
                <div class="package-desc">3小时拍摄，3套服装，20张精修，化妆服务，多场景拍摄，精美相册</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 联系人信息 -->
        <div class="form-section">
          <div class="section-title">联系人信息</div>
          <div class="contact-form">
            <div class="form-group">
              <label class="form-label required">姓名</label>
              <input type="text" class="form-input" placeholder="请输入姓名" required>
            </div>
            <div class="form-group">
              <label class="form-label required">手机号码</label>
              <input type="tel" class="form-input" placeholder="请输入手机号码" required>
            </div>
            <div class="form-group">
              <label class="form-label">微信号</label>
              <input type="text" class="form-input" placeholder="请输入微信号（选填）">
            </div>
          </div>
        </div>
        
        <!-- 拍摄地点 -->
        <div class="form-section">
          <div class="section-title">拍摄地点</div>
          <div class="section-subtitle">请选择预约拍摄的地点</div>
          
          <div class="package-options">
            <div class="package-option active" onclick="selectLocation(this)">
              <div class="package-option-radio"></div>
              <div class="package-info">
                <div class="package-name">摄影棚拍摄</div>
                <div class="package-desc">摄影师工作室，提供专业摄影环境和灯光</div>
              </div>
            </div>
            
            <div class="package-option" onclick="selectLocation(this)">
              <div class="package-option-radio"></div>
              <div class="package-info">
                <div class="package-name">外景拍摄（市区）</div>
                <div class="package-desc">市区内公园、街道等场景</div>
              </div>
            </div>
            
            <div class="package-option" onclick="selectLocation(this)">
              <div class="package-option-radio"></div>
              <div class="package-info">
                <div class="package-name">外景拍摄（郊区）</div>
                <div class="package-desc">郊区特色场景，需另付车费</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 备注信息 -->
        <div class="form-section">
          <div class="section-title">备注信息</div>
          <textarea class="form-input" placeholder="请输入特殊需求或其他备注信息" rows="4"></textarea>
        </div>
      </form>
    </div>
    
    <!-- 底部价格和提交按钮 -->
    <div class="booking-bottom">
      <div class="total-price">¥299</div>
      <button class="submit-btn" onclick="submitBooking()">提交预约</button>
    </div>
  </div>
  
  <script>
    // 当前选中的价格
    let currentPrice = 299;
    
    // 返回上一页
    function goBack() {
      history.back();
    }
    
    // 选择日期
    function selectDate(element) {
      // 移除所有已选中的日期
      document.querySelectorAll('.date-item').forEach(item => {
        item.classList.remove('active');
      });
      
      // 选中当前日期
      element.classList.add('active');
    }
    
    // 选择时间段
    function selectTimeSlot(element) {
      // 如果是禁用状态，不做任何操作
      if (element.classList.contains('disabled')) {
        return;
      }
      
      // 移除所有已选中的时间段
      document.querySelectorAll('.time-slot').forEach(item => {
        if (!item.classList.contains('disabled')) {
          item.classList.remove('active');
        }
      });
      
      // 选中当前时间段
      element.classList.add('active');
    }
    
    // 选择套餐
    function selectPackage(element) {
      // 移除所有已选中的套餐
      document.querySelectorAll('.package-options .package-option').forEach(item => {
        item.classList.remove('active');
      });
      
      // 选中当前套餐
      element.classList.add('active');
      
      // 更新价格
      currentPrice = parseInt(element.getAttribute('data-price'));
      updateTotalPrice();
    }
    
    // 选择拍摄地点
    function selectLocation(element) {
      // 获取包含这个元素的父级下的所有选项
      const parentOptions = element.closest('.package-options').querySelectorAll('.package-option');
      
      // 移除所有已选中的选项
      parentOptions.forEach(item => {
        item.classList.remove('active');
      });
      
      // 选中当前选项
      element.classList.add('active');
    }
    
    // 更新总价
    function updateTotalPrice() {
      document.querySelector('.total-price').textContent = `¥${currentPrice}`;
    }
    
    // 提交预约
    function submitBooking() {
      // 获取表单数据
      const formData = new FormData(document.getElementById('booking-form'));
      
      // 获取选中的日期
      const selectedDate = document.querySelector('.date-item.active').getAttribute('data-date');
      
      // 获取选中的时间段
      const selectedTime = document.querySelector('.time-slot.active').textContent;
      
      // 获取选中的套餐
      const selectedPackage = document.querySelector('.package-options .package-option.active .package-name').textContent;
      
      // 获取选中的拍摄地点
      const selectedLocation = document.querySelector('.form-section:nth-child(4) .package-option.active .package-name').textContent;
      
      // 构建提交数据
      const bookingData = {
        date: selectedDate,
        time: selectedTime,
        package: selectedPackage,
        location: selectedLocation,
        price: currentPrice,
        // 其他表单数据...
      };
      
      console.log('预约数据:', bookingData);
      
      // 模拟提交成功
      alert('预约成功！我们会尽快与您联系确认详情。');
      
      // 跳转到订单页面
      window.location.href = 'my_orders.html';
    }
  </script>
</body>
</html> 